<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<!-----------------------------------------------------------
		  Include Dashboard Framework & Libraries
		  
		  For all <script> tags:
		  Use 'defer' attribute for script with DOM manipulation.
		  Use 'async' attribute for scripts without DOM manipulation.
		  All base libraries should not use either of these two attribs.
		------------------------------------------------------------>

		<link rel="stylesheet" href="css/jquery-ui.min.css">
		<link rel="stylesheet" href="css/jquery-ui.theme.min.css">
		<link rel="stylesheet" href="css/alertify.core.css">
		<link rel="stylesheet" href="css/alertify.default.css">
		<link rel="stylesheet" href="css/leaflet.css">
<!--		<link rel='stylesheet' href='js/ol/css/ol.css'> -->
		<link rel="stylesheet" href="css/font-awesome.css">

		<link rel="stylesheet" type="text/css" href="css/style.css" />

		<script src="js/jquery.js"> </script>
		<script src="js/jquery-ui.min.js"></script>

		<script src="js/kernel.js"></script>
		<script src="js/kernel-extension.js"></script>
		<script src="js/sandbox.js"></script>
		<script src="js/leaflet.js"></script>
<!--		<script src='js/ol/build/ol.js'></script> -->
		
		<script src="js/kinetic.js" defer></script>
		<script src="js/notify.js" defer></script>

		<script src="js/ftscroller.js" async></script>
		<script src="js/buzz.js" async></script>
		<script src="js/osk.js" ></script>
		
		<!-----------------------------------------------------------
		  Include Dashboard Widget Scripts/Styles
		  Scripts should use 'defer' attribute to increase perf.
		------------------------------------------------------------>
		<script src="widgets/statusbar/js/statusbar.js" defer></script>
		<link rel="stylesheet" type="text/css" href="widgets/statusbar/css/statusbar.css" />

		<script src="widgets/navigation/js/navigation.js" defer></script>

		<link rel="stylesheet" type="text/css" href="widgets/media/css/media.css" />
		<script src="widgets/media/js/media.js" defer></script>

		<link rel="stylesheet" type="text/css" href="widgets/launcher/css/launcher.css" />
		<script src="widgets/launcher/js/launcher.js" defer></script>

		<link rel="stylesheet" type="text/css" href="widgets/analog-clock/css/analog-clock.css" />
		<script src="widgets/analog-clock/js/analog-clock.js" defer></script>

		<link rel="stylesheet" type="text/css" href="widgets/weatherzone/css/weatherzone.css" />
		<script src="widgets/weatherzone/js/weatherzone.js" defer></script>

		<!-----------------------------------------------------------
		  Launch Dashboard Widgets
		  (make sure all modules are "included" before you "launch" them)
		------------------------------------------------------------>
		<script>		  					
			$('document').ready(function() {			
				var x_width = window.innerWidth;
				var y_height = window.innerHeight;
				
				if (y_height > 600) {
					$("#dashNowplayingLyr").animate({top: (y_height-100)+"px"}, 500);
				}
				$("#navfs2").css({"left": (x_width-50)+"px"});
				$("#dashNavigationLyr").css({"width": (x_width-400)+"px", "height": (y_height-50)+"px"});
				$("#dashAccordion").animate({left: (x_width-400)+"px"}, 500);
				$("#dashAccordion").css({"height": (y_height-50)+"px"});

				jsKeyboard.init('virtualKeyboard');

				Kernel.register('widget-statusBar', 'statusbar');
				Kernel.register('widget-OSMap', 'navigation');
				Kernel.register('widget-media', 'media');
				Kernel.register('widget-launcher', 'launcher');
				Kernel.register('widget-clock', 'analog-clock');
				Kernel.register('widget-weather', 'weatherzone');

				Kernel.start('widget-statusBar', {renderTo: 'statusBarContent'});			
				Kernel.start('widget-OSMap', {renderTo: 'dashNavigationLyr'});			
				Kernel.start('widget-media', {renderTo: 'dashNowplayingLyr'});			
				Kernel.start('widget-launcher', {renderTo: 'dashLauncherLyr'});			
				<!--Kernel.start('widget-clock', {renderTo: 'dashClockLyr'});			-->
				Kernel.start('widget-weather', {renderTo: 'dashWeatherLyr'});			
				
				$("#accordion").accordion({
					header: "> div > h3",
					heightStyle: "fill"
				});
				
				$("#navfs").on("click", function() {
					$("#navfs").fadeOut();
					$("#dashAccordion").animate({left: x_width+"px"}, 500);
					$("#dashNavigationLyr").animate({width: x_width+"px"}, 500);
					$("#speedNaltitude").animate({left: (x_width-100)+"px"}, 500);
					$("#navfs2").fadeIn(2000);
					$("#tbtWrapper").animate({width: (x_width-110)+"px"}, 500);
					$("#nextturn").animate({width: (x_width-100)+"px"}, 500);
				});

				$("#navfs2").on("click", function() {
					$("#navfs2").fadeOut();
					$("#dashAccordion").animate({left: (x_width-400)+"px"}, 500);
					$("#dashNavigationLyr").animate({width: (x_width-400)+"px"}, 500);
					$("#speedNaltitude").animate({left: (x_width-500)+"px"}, 500);
					$("#navfs").fadeIn(1000);
					$("#tbtWrapper").animate({width: (x_width-500)+"px"}, 500);
					$("#nextturn").animate({width: (x_width-490)+"px"}, 500);
				});
        });
		</script>
	</head>
	<body>
		
	<div id='navfs' style='position: fixed; top:60px; right: 360px; color: #000;'>
		<i class='fa fa-chevron-right fa-2x' id='navfsicon'></i>		
	</div>
	<div id='navfs2' style='position: fixed; top:60px; left: 770px; display: none; color: #000;'>
		<i class='fa fa-chevron-left fa-2x' id='navfsicon2'></i>		
	</div>

  	<!--------------------------------------------------------------
	BODY BEGIN 
	Setup layers for the dashboard widgets
	--------------------------------------------------------------->
	<div id='statusBarLyr' class='statusBar'></div>
	<div id='statusBarContent' class='statusBarContent'></div>
	
	<div id='mainContentLyr' class='mainContent'>
		<div id='dashNavigationLyr' class='dashNavigation'></div>

		<div id='dashAccordion' class='dashAccordion'>
			<div id='accordion'>
				<div class='group'>
					<h3>Apps</h3>
					<div>
						<div id='dashLauncherLyr' class='dashLauncher'></div>
					</div>
				</div>
				<div class='group'>
					<h3>Weather</h3>
					<div>
						<div id='dashWeatherLyr' class='dashWeather'></div>
					</div>
				</div>
				<div class='group'>
					<h3>Notification</h3>
					<div>
						<div id='dashNotificationLyr' class='dashNotification'></div>
					</div>
				</div>
			</div>
		</div>
	</div>
		
	<div id='dashClockLyr' class='dashClock'></div>
	<div id='dashNowplayingLyr' class='dashNowplaying'></div>
	<div id="virtualKeyboard"></div>	

  </body>
</html>    

